<template>
  <div class="h-[47vh] overflow-hidden">
    <CommonCard title="新发生预警">
      <template #content>
        <TabBox :tab-list="tabList" @tabHandle="tabHandle" />
        <div
          class="h-[calc(100%-25px)] overflow-y-auto scroll-container"
          ref="scrollContainer"
          @scroll="handleScroll"
        >
          <div class="flex flex-col gap-[6px] h-full">
            <template v-if="list.length > 0">
              <div class="textBgItem" v-for="(item, index) in list" :key="index">
                <span
                  class="text-[12px] text-[#d3d4d4] w-5/6 overflow-hidden whitespace-nowrap text-ellipsis"
                  >{{ item.createTime }}{{ item.warningName }}</span
                >
                <div class="text-[14px] font-[Bebas]">
                  {{ tabList.filter((i) => i.value === item.status)[0]?.name }}
                </div>
              </div>
            </template>

            <!-- <el-empty description="暂无数据" v-else /> -->
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script lang="ts" setup>
import { getWarningList } from '@/api/home'
import CommonCard from '@/components/CommonCard.vue'
import TabBox from '@/components/TabBox.vue'
import { useCommonStore } from '@/stores/common'
import { smoothScroll, timeNum } from '@/utils/commonFn'
import { onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
const tabList = ref<CommonTypes.tabList[]>([
  {
    value: '',
    name: '全部'
  },
  {
    value: '1',
    name: '待审核'
  },
  {
    value: '2',
    name: '待推送'
  },
  {
    value: '3',
    name: '已推送'
  }
])
const formData = ref({
  pageNum: 1,
  pageSize: 999,
  status: '',
  institutionId: sessionStorage.getItem('institutionId')
})
watch(
  () => useCommonStore().institutionId,
  (value) => {
    formData.value.institutionId = value
    getListFn()
  }
)
const list = ref<any[]>([])
const timer = ref()
onMounted(() => {
  getListFn()
  timer.value = setInterval(() => {
    formData.value.pageNum = 1
    list.value = []
    getListFn()
  }, timeNum)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
const getListFn = async () => {
  const res: any = await getWarningList(formData.value)
  list.value = list.value.concat(res?.data.list)
  isRefreshLock.value = true
}
const tabHandle = (e: CommonTypes.tabList) => {
  console.log(e)
  formData.value.status = e.value
  rest()
}
const rest = () => {
  formData.value.pageNum = 1
  list.value = []
  getListFn()
}
const scrollContainer = ref<any>(null)
const isRefreshLock = ref()

const smoothScrollDown = () => {
  const start = scrollContainer.value.scrollTop
  const target = start + 50
  smoothScroll(start, target, scrollContainer.value)
}

const handleScroll = () => {
  const container: any = scrollContainer.value
  const isAtBottom = container.scrollHeight - container.scrollTop === container.clientHeight

  if (isAtBottom && isRefreshLock.value) {
    // 滚动到底部，返回到顶部
    scrollContainer.value.scrollTop = 0
    isRefreshLock.value = false
  }
}
const startAutoScroll = () => {
  const scrollInterval = setInterval(() => {
    smoothScrollDown()
  }, 2000)

  return scrollInterval
}
const scrollInterval = startAutoScroll()
const stopAutoScroll = (interval: any) => {
  clearInterval(interval)
}

onBeforeUnmount(() => {
  // 在组件销毁前清除定时器
  stopAutoScroll(scrollInterval)
})
</script>

<style scoped lang="less">
.scroll-container {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox */
}

/* Webkit (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
  width: 0px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
